<template>
  <div class="app-container">

    <!--  版权方角色，隐藏搜索  -->
    <template v-if="!isCopyright">
      <div class="flex jc-between">
        <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery">
          <template slot="selectRemote" slot-scope="{param}">
            <template v-if="param === 'seed_id'">
              <YxhySelectRemote
                :value.sync="queryParams.seed_id"
                :request-fn="querySeedAll"
                :request-key="`chinese_name`"
                :response-id="`id`"
                :response-name="`chinese_name`"
                :placeholder="`请选择投手账号`"
              />
            </template>
          </template>
          <template slot="datetimeRange">
            <YxhyDatetimeRange :start-date.sync="queryParams.start_date" :end-date.sync="queryParams.end_date" />
          </template>
          <template slot="button">
          </template>
        </YxhyTableQuery>
      </div>
    </template>

    <YxhyTableData
      :columns="columns"
      :data="tableList"
      :loading="loading"
      :stripe="false"
      :other-config="{
        'summary-method': getSummaries,
        'show-summary': true
      }"
    >
      <!-- 普通充值金额插槽 -->
      <template #coin_recharge_amount>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">普通充值金额</p>
            <p class="font-color-th">普通充值人数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.coin_recharge_amount }}</p>
            <p class="font-color-td">{{ row.coin_recharge_num }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 会员充值金额插槽 -->
      <template #vip_recharge_amount>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">会员充值金额</p>
            <p class="font-color-th">会员充值人数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.vip_recharge_amount }}</p>
            <p class="font-color-td">{{ row.vip_recharge_num }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 全剧订阅金额插槽 -->
      <template #sub_vip_recharge_amount>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">全剧订阅金额</p>
            <p class="font-color-th">全剧订阅人数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.sub_vip_recharge_amount }}</p>
            <p class="font-color-td">{{ row.sub_vip_recharge_num }}</p>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

  </div>
</template>

<script>
import { columnsStatic } from './Ds.js'
import { queryNonSortLibrary } from '@/api/video/library'
import { querySeedList } from '@/api/statistics/thorwered'
import { querySeedAll } from '@/api/settlement/thrower'

export default {
  name: 'ThroweredList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        seed_id: undefined,
        start_date: undefined,
        end_date: undefined
      },
      // 查询表单
      queryColumns: [
        {
          label: '',
          placeholder: '请选择投手',
          type: 'selectRemote',
          param: 'seed_id'
        },
        {
          type: 'datetimeRange',
          param: 'datetime_search'
        }
      ],

      loading: false,
      // 表格列
      columns: columnsStatic,

      queryNonSortLibrary,
      querySeedAll
    }
  },
  computed: {
    isCopyright() {
      return this.$store.state.user.roles.includes('copyright')
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await querySeedList({
        ...this.queryPage,
        ...this.queryParams
      })
      res.data.forEach(e => {
        const { cost, order_amount, new_recharge_amount } = e
        e.cost_text = `￥${cost}`
        e.order_amount_text = `￥${order_amount}`
        e.new_recharge_amount_text = `￥${new_recharge_amount}`
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
        type: 1,
        oss_id: undefined
      }
      this.resetForm('formRef')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 导出按钮 */
    async handleExport() {
      this.download(
        `/statistic/order?page=${this.queryPage.pageNum}`,
        {
          ...this.queryPage,
          ...this.queryParams,
          export: 1
        },
        `data_${new Date().getTime()}.xlsx`
      )
    },
    /** 合计计算 */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // 消耗
        if (index == 4) {
          const values_arr = data.map(item => Number(item.cost))
          let values_count = this.calculateTd(values_arr)
          values_count = this.reserveNumberTow(values_count)
          sums[index] = `￥${values_count}`
        }
        // 消耗
        if (index == 5) {
          const values_arr = data.map(item => Number(item.order_amount))
          let values_count = this.calculateTd(values_arr)
          values_count = this.reserveNumberTow(values_count)
          sums[index] = `￥${values_count}`
        }
      })

      return sums
    },

    calculateTd(arr) {
      const result = arr.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) return prev + curr
        else return prev
      }, 0)
      return result
    },

    // 保留两位小数，不四舍五入
    reserveNumberTow(number) {
      return Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
    },
    // 百分比，不保留小数
    reserveNumberZero(number) {
      return Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(number)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
